<template>
	<div>
	   <div style="width:90%;padding-left:15px;height:100%;margin-bottom: 20px;" id="printContent">

		<!-- 样式参考 https://blog.csdn.net/qq_35946021/article/details/125746634 -->
		  <h2 style="text-align:center"></h2>

		  <el-row style="margin-bottom:10px;">
			 <span>编号：{{data.id }}</span>
			 <span style="float:right">{{  data.year}}年{{ data.month }}月{{data.month}}日</span>
		  </el-row>

		  <el-row>
			  <el-col :span="12" class="col"><div class="title">女演员</div><div class="val">{{data.name}}</div></el-col>
			  <el-col :span="12" class="col"><div class="title">性别</div><div class="val">{{data.gender=='0'?'男':'女'}}</div></el-col>
		  </el-row>

		  <el-row>
			  <el-col :span="12" class="col"><div class="title">出生日期</div><div class="val">{{data.birthday}}</div></el-col>
			  <el-col :span="12" class="col"><div class="title">联系电话</div><div class="val">{{data.mobile}}</div></el-col>
		  </el-row>

		  <el-row>
			  <el-col :span="24" class="col"><div class="title">角色名</div><div class="val"><span style="color:red;">❤</span>佟年<span style="color:red;">❤</span>我好喜欢佟年，软萌佟年爱一生<span style="color:red;">❤</span></div></el-col>
		  </el-row>

		  <el-row>
			  <el-col :span="12" class="col"><div class="title">男演员</div><div class="val">{{data.name1}}</div></el-col>
			  <el-col :span="12" class="col"><div class="title">性别</div><div class="val">{{data.gender1=='0'?'男':'女'}}</div></el-col>
		  </el-row>

		  <el-row>
			  <el-col :span="12" class="col"><div class="title">出生日期</div><div class="val">{{data.birthday1}}</div></el-col>
			  <el-col :span="12" class="col"><div class="title">联系电话</div><div class="val">{{data.mobile1}}</div></el-col>
		  </el-row>

		  <el-row>
			  <el-col :span="24" class="col"><div class="title">角色名</div><div class="val"><span style="color:red;">❤</span>韩商言<span style="color:red;">❤</span>表白一下韩商言,kk战队也喜欢<span style="color:red;">❤</span></div></el-col>
		  </el-row>

		  <el-row >
			<el-col  class="col"><div class="title">简介</div><div class="val" style="line-height:18px;"><span style="color:pink;">❤❤❤</span>{{data.content}}</div></el-col>
		  </el-row>
	   </div>

	   <span slot="footer">
		 <el-button type="primary" icon="el-icon-printer" @click="printPage">打印</el-button>
	   </span>

	</div>
</template>


<script>
export default {
data() {
  return {
	visible:false,
	data:{
	  id:'201907090123232320',
	  year:'2019',
	  month:'7',
	  day:'9',
	  name:'杨紫',
	  gender:'1',
	  birthday:'1992年11月6日',
	  mobile:'15888888888',

	  name1:'李现',
	  gender1:'0',
	  birthday1:'1991年10月19日',
	  mobile1:'15666666666',

	  content:'该剧根据墨宝非宝小说《蜜汁炖鱿鱼》改编，讲述软萌少女佟年对热血青年韩商言一见钟情，二人在相处中甜蜜碰撞，上演一场高智商与高情商的甜萌梦幻爱情故事......',

	}
  };
},
methods: {
  init() {
	 this.visible = true;

  },
  printPage(){
	let wpt = document.querySelector('#printContent');
	let newContent = wpt.innerHTML;
	let oldContent = document.body.innerHTML;

	document.body.innerHTML = newContent;

	window.print(); //打印方法
	history.go(0);

	document.body.innerHTML = oldContent;
  },

},

};
</script>
<style>
.el-dialog__footer{
height:70px;
margin-top:15px;
}

.col{
  /* // border: 1px solid #e6e9f0; */
  border: 0.5px solid #000000;
  height:55px;
  line-height: 55px;
  display: flex;


}

div{
	  padding-left:20px;
  }
  .title{
	  /* // min-width: 150px; */
	  min-width: 85px;
	  /* // background-color: #f5f5f5; //title的背景色 */
	  /* // color: #1F2E4D; */
	  color:#000000;
  }
  .val{
	  flex: 1;
	  /* // border-left: 1px solid #e6e9f0; */
	  border-left: 1px solid #000000;
	  /* // color: #3D4966; */
	  color:#000000;
  }
</style>
